2<template>
  <div>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :md="20" :sm="24">
            <a-col :md="12" :sm="24">
              <a-form-item
                label="基地名称"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input  v-decorator="['lhpyjdmc',
                  {
                    rules: [{ required: true, message: '请输入基地名称!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="基地编号"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input  v-decorator="['jdbh',
                  {
                    rules: [{ required: true, message: '请输入基地编号!' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="依托学院"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select :allowClear="true" optionFilterProp="children" showSearch  v-decorator="['yxm',
                  {
                    rules: [{ required: true, message: '请选择依托学院!' }],
                  }]">

                    <a-select-option v-for="i in selectMenu.yx" :key="i.id" :value="i.dwh">{{ i.dwh+'-'+i.dwmc }}</a-select-option>
                  </a-select>

              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item :labelCol="{span: 8,offset: 1}"
                           :wrapperCol="{span: 14, offset: 1}"
                           label="专业类别"
              >
                <a-select mode="multiple" :allowClear="true" :disabled="disabled" optionFilterProp="children" showSearch v-decorator="['zylbs',
                  {
                    rules: [{ required: true, message: '请选择专业类别!' }],
                  }]">
                  <a-select-option :key="i.id" :value="i.id" v-for="i in selectMenu.zy">{{ i.xkdm+'-'+i.xkmc }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item :labelCol="{span: 8,offset: 1}"
                           :wrapperCol="{span: 14, offset: 1}"
                           label="专业领域"
              >
                <a-input v-decorator="['zyly',
                  ]">
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item :labelCol="{span: 8,offset: 1}"
                           :wrapperCol="{span: 14, offset: 1}"
                           label="专业方向"
              >
                <a-input v-decorator="['zyfx',
                  ]">
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="基地级别"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select allowClear v-decorator="['jdjb',
                  {
                    rules: [{ required: true, message: '请选择基地级别!' }],
                  }]">
                  <a-select-option v-for="i in JDJB" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="合同"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-select @change="sfhtChange" v-decorator="['sfht',
                  {
                    rules: [{ required: true, message: '请选择基地级别!' }],
                  }]">
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="合同开始时间"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker :disabled="sfht === '0'" v-decorator="['htkssj',
                  {
                     rules: [{ required: sfht === '1', message: '请选择合同开始时间' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="合同结束时间"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-date-picker :disabled="sfht === '0'" v-decorator="['htjssj',
                  {
                     rules: [{ required: sfht === '1', message: '请选择合同结束时间' }],
                  }]" style="width: 100%" format="YYYY-MM-DD"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="单位地址"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['dwdz',
                  {
                    rules: [{ required: true, message: '请输入单位地址' }],
                  }]"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <a-form-item
                label="基地联系人"
                 :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['jdlxr',
                  {
                    rules: [{ required: true, message: '请输入基地联系人' }],
                  }]"/>
              </a-form-item>
            </a-col>

            <a-col :md="12" :sm="24">
              <a-form-item
                label="联系电话"
                :labelCol="{span: 8,offset: 1}"
                :wrapperCol="{span: 14, offset: 1}"
              >
                <a-input v-decorator="['lxdh',
                  {
                    rules: [{ required: true, message: '请输入联系电话!' }],
                  }]">
                </a-input>
              </a-form-item>
            </a-col>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="20" :sm="24">
            <a-form-item label="备  注" :labelCol="{span: 3,offset: 1}" :wrapperCol="{span: 19,offset: 1}">
              <a-input type="textarea"  v-decorator="['bz',{ rules: [{ required: true, message: '请输入备注信息' }],}]" :autosize="{ minRows: 4, maxRows: 6 }"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>


    <div class="ant-pro-footer-toolbar">
      <a-button style="float: right;margin-top: 10px;" @click="creatTeacher" :loading="loadingBtn" type="primary">保存</a-button>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import ACol from "ant-design-vue/es/grid/Col";

  const selectArr=["JDJB"]
function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  data () {
    return {
      selectMenu: {
        yx:[],
        zy:[]
      },
      loading: false,
      imageUrl: '',
      loadingBtn: false,
      dsbh: '',
      zsnd: '',
      sfht: '0',
      disabled: false,
    }
  },
  components: {ACol},
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },

  computed: {
    ...mapState({
      systemInfo: state => state.app.systemInfo,
      JDJB:state=>state.app.JDJB,
    })
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
    this.initSelectMenu()
  },
  methods: {
    initSelectMenu () {
      let allRequest = [
        this.$api.base.collegeAll(),
        this.$api.base.areaList()
      ]
      Promise.all(allRequest).then(res => {
        this.selectMenu = {
          yx: res[0].data,
          province: res[1].data
        }
      })
      this.$api.baseTeacher.listDegree().then(res => {
        this.$set(this.selectMenu, 'zy', res.data)
      })
    },
    handlePChange(v) {
      this.form.setFieldsValue({byxxdm: ''})
      this.$api.base.schoolInfoQueryAll({xzqhsdm: v}).then(res => {
        this.$set(this.selectMenu, 'schoolList' , res.data)
      })
    },
    sfhtChange (code) {
      this.sfht = code
      this.form.setFieldsValue({htkssj: '', htjssj: ''})
    },
    yxChange (code) {
      this.form.setFieldsValue({zylb: ''})
     // this.$set(this.queryParam, 'zylb', '')

      // if (code) {
      //
      // } else {
      //   this.form.setFieldsValue({zylb: ''})
      //  // this.$set(this.queryParam, 'zylb', '')
      // }
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    setData (option, key) {
      this.form.setFieldsValue({[key]: option.data.attrs.name})
    },
    provinceChange (v) {
      this.form.setFieldsValue({csdcdm: '', csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'city', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'city', [])
      }
      this.$set(this.selectMenu, 'area', [])
    },
    cityChange (v) {
      this.form.setFieldsValue({csdxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'area', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'area', [])
      }
    },
    provinceNativeChange (v) {
      this.form.setFieldsValue({jgcdm: '', jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'nativeCity', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'nativeCity', [])
      }
      this.$set(this.selectMenu, 'nativeArea', [])
    },
    cityNativeChange (v) {
      this.form.setFieldsValue({jgxqdm: ''})
      if (v) {
        this.$api.base.areaList({parentCode: v}).then(res => {
          this.$set(this.selectMenu, 'nativeArea', res.data)
        })
      } else {
        this.$set(this.selectMenu, 'nativeArea', [])
      }
    },
    creatTeacher () {
      this.form.validateFields((err, values) => {
      console.log(values)

        if (err) {
          return
        }
        try {
          this.loadingBtn = true
          for (const key in values) {
            if (['htkssj', 'htjssj'].includes(key) && values[key]) {
              values[key] = values[key].format('YYYY-MM-DD')
            }
          }
          this.$DateToString(values)
          this.$api.baseTeacher.saveLhpyjd(values).then(res => {
            this.$message.success(res.msg)
             this.form.resetFields()
          }).finally(() => {
            this.loadingBtn = false

          })
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>
